<template>
  <div class="comments-box">
    <!--上拉加载组件 待引入-->
    <!--<ul class="cb-tabs" :class="{heightauto:updown}">-->
      <!--<li>全部 <span>(8888)</span></li>-->
      <!--<li :key="index" v-for="(item,index) in uComments">{{item}}</li>-->
    <!--</ul>-->
    <!--<div class="arrow-down-box"><i :class="{on:updown}" @click="updown=!updown"></i></div>-->
    <!--user comments content-->
    <ul class="user-comment-box">
      <li :key="index" v-for="(item,index) in userComments">
        <div class="user-info">
          <div class="info-left" style="width: 70%">
            <img :src="item.headImg" alt="">
            <span>{{item.nickName}}</span>
          </div>
          <div class="info-right" style="width: 30%; text-align: right">
            <span>{{item.createTime.substring(0,10)}}</span>
          </div>
        </div>
        <div class="text-content">
          {{item.content}}
        </div>
      </li>
      <li v-if="userComments.length<1">
        <div class="user-info">
          暂无评论
        </div>

      </li>
    </ul>
  </div>
</template>

<script>
  import global from '../public/global.vue'
  export default {
    name: 'comments',
    data() {
      return {
        uComments: ["最新", "很好喝", "有点晕", "把他媳妇灌晕", "开始下一步"],
        updown: false,
        userComments:[],

      }
    },
    mounted () {
      let url = global.apiUrl;
      let id = this.$route.query.id;
      let type=this.$route.query.type;
      let self = this;
      //获取评论
      if(type==1){
        this.$http.get(url + '/goods/getGoodsEvaluate?id='+id).then(res => {
          if(res.data.data!=""){
            self.userComments=res.data.data;
          }
        })
      }
      if(type==2){
        this.$http.get(url + '/sommelier/getEvaluate?agentId='+id).then(res => {
          if(res.data.data!=""){
            self.userComments=res.data.data;
          }
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .comments-box {
    width: 100%;
    padding: 10px;
    .cb-tabs {
      width: 100%;
      height: 3.5rem;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      transition:0.8s all;
      li {
        padding: 2px 10px;
        border-radius: 40px;
        background: #FF9999;
        color: #fff;
        margin-right: 10px;
        margin-bottom: 10px;
        font-size: 0.9rem;
      }
      li:first-child{
        background: #FF6666;
      }
    }
    .heightauto{
      height:auto;
    }
    /*下拉箭头*/
    .arrow-down-box {
      width: 100%;
      height: 20px;
      text-align: center;
      margin-top:-5px;
      margin-bottom:5px;
      i {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 auto;
        border-right: 2px solid #aaa;
        border-bottom: 2px solid #aaa;
        transform: rotateZ(45deg);
        transition: 0.2s all;
      }
      .on {
        transform: rotateZ(225deg);
      }
    }
    /*用户评论区*/
    .user-comment-box{
      margin-top:10px;
      width:100%;
      li{
        width:100%;
        padding:10px 0;
        border-top:1px solid #ddd;
        .user-info{
          display: flex;
          justify-content:space-between;
          .info-left{
            font-size:0.9rem;
            img{
              width:40px;
              height:40px;
              border-radius:50%;
              vertical-align: middle;
            }
          }
          .info-right{
            font-size: 0.8rem;
            color:#aaa;
            line-height: 44px;
          }
        }
        .text-content{
          font-size:0.8rem;
          color:#aaa;
        }
      }
    }

  }
</style>
